<template>
  <SelectTrigger label="相机移动的方式" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示相机移动的事件
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
const options = ref([]);
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  const viewer = new Cesium.Viewer("cesiumContainer");
  options.value = [
    {
      text: "flyTo的方式:定位到一个点",
      onselect: function () {
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 150000.0),
        });
      },
    },
    {
      text: "flyTo的方式:定位到一个区域",
      onselect: function () {
        // 设置一个多边形实体方便观察
        viewer.entities.add({
          rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(120.0, 20.0, -60.0, 40.0),
            material: Cesium.Color.RED.withAlpha(0.2),
          },
        });
        viewer.camera.flyTo({
          // Cesium.Rectangle.fromDegrees() 接受 4 个参数（西边界，经度最小值；南边界，纬度最小值；东边界，经度最大值；北边界，纬度最大值）。
          destination: Cesium.Rectangle.fromDegrees(120.0, 20.0, -60.0, 40.0),
        });
      },
      // 取消选择执行的函数
      onUnSelect: () => {
        viewer.entities.removeAll();
      },
    },
    {
      text: "flyTo的方式:定位到一个点，设置方向",
      onselect: function () {
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 150000.0),
          orientation: {
            direction: new Cesium.Cartesian3(
              -0.04231243104240401,
              -0.20123236049443421,
              -0.97862924300734
            ),
            up: new Cesium.Cartesian3(
              -0.47934589305293746,
              -0.8553216253114552,
              0.1966022179118339
            ),
          },
        });
      },
    },
    {
      text: "flyTo的方式:定位到一个点，设置方位角",
      onselect: function () {
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 15000.0),
          orientation: {
            heading: Cesium.Math.toRadians(175.0),
            pitch: Cesium.Math.toRadians(-35.0),
            roll: 0.0,
          },
        });
      },
    },
    {
      text: "flyToBoundingSphere方法",
      onselect: function () {
        const center = Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0);
        const radius = 10;
        // 这是一个 Cesium.BoundingSphere 对象，用于定义你想让相机飞行到的空间区域。包围球由一个中心点和一个半径组成，描述了空间中的一个球体区域。
        const boundingSphere = new Cesium.BoundingSphere(center, radius);
        const heading = Cesium.Math.toRadians(50.0);
        const pitch = Cesium.Math.toRadians(-20.0);
        const range = 155000.0;
        // 让相机平滑地飞到一个包围球区域
        viewer.camera.flyToBoundingSphere(boundingSphere, {
          duration: 3.0, // 飞行的持续时间
          maximumHeight: 10000.0, // 相机的最大高度
          offset: new Cesium.HeadingPitchRange(heading, pitch, range), // // 设置相机的角度和距离
        });
      },
    },
    {
      text: "lookAt方法",
      onselect: function () {
        //  lookAt 用于将相机锁定到一个特定的目标位置，并且通过设置相对于该目标的位置偏移来控制相机的观察角度。
        // lookAt(target,offset) target:目标点  offset:相机偏移
        const offset = new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0);
        viewer.camera.lookAt(
          Cesium.Cartesian3.fromDegrees(-98.0, 40.0),
          offset
        );
      },
    },
    {
      text: "lookAtTransform方法",
      onselect: function () {
        // lookAtTransform 用于将相机定位到某个特定的变换矩阵位置，并且将相机相对于该矩阵定义的坐标系来定位和旋转。
        // lookAtTransform(transformMatrix,offset) transformMatrix: 矩阵  offset:相机偏移
        // 定义一个矩阵（可以是某个模型或对象的变换矩阵）
        const transformMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
          Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)
        );
        const offset = new Cesium.HeadingPitchRange(
          Cesium.Math.toRadians(50.0),
          Cesium.Math.toRadians(-20.0),
          15000.0
        );
        // 将相机放在矩阵参考系中，并设置偏移量
        viewer.camera.lookAtTransform(transformMatrix, offset);
      },
      // 取消选择执行的函数
      onUnSelect: () => {
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); // 取消视角锁定
      },
    },
    {
      text: "setView方法",
      onselect: function () {
        // setView 自顶向下查看位置
        viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
        });
        // 保持位置不变设置相机角度
        viewer.camera.setView({
          orientation: {
            heading: Cesium.Math.toRadians(100.0), // east, default value is 0.0 (north)
            pitch: Cesium.Math.toRadians(-20), // default value (looking down)
            roll: 0.0, // default value
          },
        });
      },
    },
  ];
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
